/*
 * @Author: xiaosihan 
 * @Date: 2024-03-10 08:37:37 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-17 22:10:46
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./windowsTypeModal.module.less";
import { Button, Checkbox, CheckboxProps, Modal, Radio, Table, Tooltip } from "antd";
import homeStore from "@views/home/homeStore";
import config from "@views/home/config/config";
import windowRenderer from "./windowRenderer";
import { get, set } from "lodash";
import { table } from "console";
import { CheckboxValueType } from "antd/lib/checkbox/Group";

interface Iprops {
    children?: ReactNode
}

// 窗型信息弹窗
export default function WindowsTypeModal(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [open, setOpen] = useState(false);
    const [showState, setShowState] = useState(homeStore.showState);
    const [dataSource, setDataSource] = useState<any>([]);
    const [lookWindowModal, setLookWindowModal] = useState(false);
    const [lookWindowUrl, setLookWindowUrl] = useState("");
    const [lookWindowType, setLookWindowType] = useState("");
    const [windowTypes, setWindowTypes] = useState<any>([]);
    const [dragging, setDragging] = useState(false);
    const [offsetX, setOffsetX] = useState(0);
    const [offsetY, setOffsetY] = useState(0);
    const modalRef = useRef<HTMLDivElement>(null);

    const [activeType, setActiveType] = useState<string[]>([]);
    // const checkAll = plainOptions.length === checkedList.length;
    // const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;

    // const onChange = (list: CheckboxValueType[]) => {
    //     setCheckedList(list);
    // };

    // const onCheckAllChange: CheckboxProps['onChange'] = (e) => {
    //     setCheckedList(e.target.checked ? plainOptions : []);
    // };

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setShowState(homeStore.showState);

        const { windowType, activeType } = homeStore;

        const dataSource = windowType.map((w, i) => {
            return {
                key: i,
                winList: get(w, ["winList"]),
                floor: w.floorNo,
                south_color: "#FFFF00",
                north_color: "#FFFF00",
                east_color: "#FE0032",
                west_color: "#FE0032",
                end_color: "#FE0032",
            }
        });

        setDataSource(dataSource);

        const windowTypes: Array<any> = [];
        windowType.map(w => {
            w.winList.map(l => {
                if (!windowTypes.includes(l.name) && !windowTypes.some(w => w.name === l.name)) {
                    windowTypes.push({
                        key: l.name,
                        name: l.name,
                        url: l.url,
                        color: l.color
                    });
                }
            })
        });
        setWindowTypes(windowTypes);
        setActiveType(activeType);

    }), []);


    const columns = [
        {
            title: '层',
            dataIndex: 'floor',
            key: 'floor',
        },
        {
            title: '窗型号',
            dataIndex: 'winList',
            key: 'south',
            render: (winList: any) => {
                return <span style={{ fontWeight: "bold" }}>
                    {
                        winList.map((w: any) => {
                            return <> <span className={styles.typeName} >{w.name}</span>  <br /> </>
                        })
                    }
                </span>
            }
        },
        {
            title: '南向',
            children: [
                {
                    title: '数量',
                    dataIndex: 'winList',
                    key: 'south',
                    render: (winList: any, i: number) => {
                        return <span key={i} >
                            {
                                winList.map((w: any, ii: number) => {
                                    return <> <span className={styles.typeName} >{w.south}</span>  <br /> </>
                                })
                            }
                        </span>
                    }
                },
                {
                    title: '颜色',
                    dataIndex: 'winList',
                    key: 'south_color',
                    render: (winList: any, i: number) => {
                        return <>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <>
                                        <span className={styles.colorBlock} style={{ backgroundColor: w.color }} ></span>
                                        <br />
                                    </>
                                })
                            }
                        </>
                    }
                }
            ]
        },
        {
            title: '北向',
            children: [
                {
                    title: '数量',
                    dataIndex: 'winList',
                    key: 'north',
                    render: (winList: any, i: number) => {
                        return <span key={i}>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <> <span className={styles.typeName} >{w.north}</span><br /> </>
                                })
                            }
                        </span>
                    }
                },
                {
                    title: '颜色',
                    dataIndex: 'winList',
                    key: 'north_color',
                    render: (winList: any, i: number) => {
                        return <>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <>
                                        <span className={styles.colorBlock} style={{ backgroundColor: w.color }} ></span>
                                        <br />
                                    </>
                                })
                            }
                        </>
                    }
                },
            ]
        },
        {
            title: '东向',
            children: [
                {
                    title: '数量',
                    dataIndex: 'winList',
                    key: 'east',
                    render: (winList: any, i: number) => {
                        return <span key={i}>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <> <span className={styles.typeName} >{w.east}</span>  <br /> </>
                                })
                            }
                        </span>
                    }
                },
                {
                    title: '颜色',
                    dataIndex: 'winList',
                    key: 'east_color',
                    render: (winList: any, i: number) => {
                        return <>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <>
                                        <span className={styles.colorBlock} style={{ backgroundColor: w.color }} ></span>
                                        <br />
                                    </>
                                })
                            }
                        </>
                    }
                },
            ]
        },
        {
            title: '西向',
            children: [
                {
                    title: '数量',
                    dataIndex: 'winList',
                    key: 'west',
                    render: (winList: any, i: number) => {
                        return <span key={i}>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <> <span className={styles.typeName} > {w.west}</span><br /> </>
                                })
                            }
                        </span>
                    }
                },
                {
                    title: '颜色',
                    dataIndex: 'winList',
                    key: 'west_color',
                    render: (winList: any, i: number) => {
                        return <>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <>
                                        <span className={styles.colorBlock} style={{ backgroundColor: w.color }} ></span>
                                        <br />
                                    </>
                                })
                            }
                        </>
                    }
                },
            ]
        },
        {
            title: '收尾',
            children: [
                {
                    title: '数量',
                    dataIndex: 'winList',
                    key: 'end',
                    render: (winList: any, i: number) => {
                        return <span key={i}>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <> <span className={styles.typeName}>{w.end}</span>  <br /> </>
                                })
                            }
                        </span>
                    }
                },
                {
                    title: '颜色',
                    dataIndex: 'winList',
                    key: 'end_color',
                    render: (winList: any, i: number) => {
                        return <>
                            {
                                winList.map((w: any, ii: number) => {
                                    return <>
                                        <span className={styles.colorBlock} style={{ backgroundColor: w.color }} ></span>
                                        <br />
                                    </>
                                })
                            }
                        </>
                    }
                },
            ]
        },

    ]

    useEffect(() => {
        function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
            if (modalRef.current) {
                if (e.target !== modalRef.current) {
                    return;
                }
                setDragging(true);
                //@ts-ignore
                const rect = modalRef.current.parentNode.parentNode.getBoundingClientRect();
                if (rect) {
                    //@ts-ignore
                    setOffsetX(e.clientX - (modalRef.current.parentNode!.parentNode as HTMLDivElement).offsetLeft);
                    //@ts-ignore
                    setOffsetY(e.clientY - (modalRef.current.parentNode!.parentNode as HTMLDivElement).offsetTop);
                }
            }
        }

        function handleMouseMove(e: MouseEvent) {
            if (!dragging) return;
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            if (modalRef.current) {
                //@ts-ignore
                modalRef.current.parentNode.parentNode.style.left = `${x}px`;
                //@ts-ignore
                modalRef.current.parentNode.parentNode.style.top = `${y}px`;
            }
        }

        function handleMouseUp() {
            setDragging(false);
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }

        if (open && modalRef.current) {
            //@ts-ignore
            modalRef.current.addEventListener('mousedown', handleMouseDown);
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        } else {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }

        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
            if (modalRef.current) {
                //@ts-ignore
                modalRef.current.removeEventListener('mousedown', handleMouseDown);
            }
        };
    }, [open, dragging]);

    return (
        <>
            <table className={styles.typetTable} border={1} >
                <tbody>
                    <tr>
                        <td width={120} align="center" >窗型信息</td>
                        <td>
                            <div className={styles.state}>
                                <Table
                                    bordered
                                    rowClassName={() => styles.state_table}
                                    size="small"
                                    columns={[
                                        {
                                            title: "颜色", key: "color", dataIndex: "color", width: 40,
                                            render: (color) => {
                                                return (
                                                    <span
                                                        style={{ backgroundColor: color }}
                                                        className={styles.state_item_color}
                                                    ></span>
                                                );
                                            }
                                        },
                                        {
                                            title:
                                                <Checkbox
                                                    indeterminate={![0, windowTypes.length].includes(activeType.length)}
                                                    checked={windowTypes.length === activeType.length}
                                                    onChange={() => {
                                                        homeStore.checkAllType();
                                                    }}
                                                >
                                                    <span className={styles.state_item}>
                                                        <span className={styles.state_item_name} >全选/窗号</span>
                                                    </span>
                                                </Checkbox>
                                            , key: "name", dataIndex: "name",
                                            render: (n) => {
                                                return (
                                                    <Checkbox
                                                        checked={activeType.includes(n)}
                                                        onChange={(e) => {
                                                            homeStore.checkType(n);
                                                        }}
                                                    >
                                                        <Tooltip title={n}>
                                                            <span className={styles.state_item_name} >{n}</span>
                                                        </Tooltip>
                                                    </Checkbox>
                                                );
                                            }
                                        },
                                        {
                                            title: "大样图", key: "url", dataIndex: "url",
                                            render: (url, d) => {
                                                return (
                                                    <Button
                                                        type="primary"
                                                        size="small"
                                                        onClick={() => {
                                                            setLookWindowUrl(url);
                                                            setLookWindowType(d.name);
                                                            setLookWindowModal(true);
                                                        }}
                                                    >查看</Button>
                                                );
                                            }
                                        },
                                    ]}
                                    dataSource={windowTypes}
                                    pagination={{
                                        pageSize: 10,
                                        showSizeChanger: false,
                                        position: ["bottomCenter"]
                                    }}
                                />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">详细报表</td>
                        <td>
                            <Button
                                type="primary"
                                onClick={() => setOpen(true)}
                            >查看报表</Button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <Modal
                open={open}
                className={styles.windowsTypeModal}
                footer={false}
                centered={true}
                width={1000}
                onCancel={() => setOpen(false)}
                maskClosable={false}
            >
                <div
                    style={{
                        cursor: "pointer",
                        paddingTop: 20,
                        marginTop: -20
                    }}
                    ref={modalRef}
                    className="draggable-modal-header">
                    <div className={styles.title}>窗型信息报表</div>
                </div>
                <div className={styles.table} >
                    <Table
                        bordered
                        size="small"
                        columns={columns}
                        dataSource={dataSource}
                        pagination={false}
                    />
                </div>
            </Modal>

            <Modal
                title={`查看窗型: ${lookWindowType}`}
                className={styles.windowsTypeModal}
                open={lookWindowModal}
                width={600}
                centered={true}
                footer={null}
                maskClosable={false}
                onCancel={() => setLookWindowModal(false)}
            >
                <img
                    src={lookWindowUrl}
                    className={styles.windowRenderer}
                />
            </Modal>

        </>
    );

}